<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="__CSS__/swiper-3.4.2.min.css"/>
    <link rel="stylesheet" href="__CSS__/common.css"/>
    <link rel="stylesheet" href="__CSS__/fsx.css"/>
    <link rel="shortcut icon" href="__IMG__/fsx0.ico">
    <style>
        html,body{width: 100%; height: 100%; overflow: hidden; }
        .anMode{width:370px;}
    </style>
</head>
<body>
<div class="login_top">
    <!--nav-->
    <tc_include file="Home/Public/nav" />
    <!--nav end-->
</div>


<!--content-->

<div class="login_box">
    <div class="an-box">
        <div class="heighst"></div>
        <form action="{:U('Home/Register/doReg')}" method="post"  enctype ="multipart/form-data">
        <div class="an-cnnter" style="height:620px;">
            <div class="zhilogo"><img src="__IMG__/logo5.png" /></div>
            <div class="anlogo">樱空注册</div>
            <div class="anMode">
                <span class="animg"><img src="__IMG__/anicon1.png" alt=""/></span>
                <span class="aninput"><input class="necessary" data-name="账号" name="account" type="text" placeholder="账号（由3-9位字母、数字组成）"/></span>
            </div>
            <div class="anMode anMode2">
                <span class="animg"><img src="__IMG__/anicon2.png" alt=""/></span>
                <span class="aninput"><input class="necessary pass" data-name="密码"  name="pass" type="password" placeholder="密码（由3-9位字母、数字组成）"/></span>
            </div>
            <div class="anMode anMode2">
                <span class="animg"><img src="__IMG__/anicon2.png" alt=""/></span>
                <span class="aninput"><input class="necessary repass"  data-name="重复密码"  type="password" placeholder="重复密码"/></span>
            </div>
            <div class="anMode anMode2">
                <span class="animg"><img src="__IMG__/tel.png" width="10px" alt=""/></span>
                <span class="aninput"><input class="necessary"  data-name="手机号"  name="tel" type="tel" placeholder="手机号"/></span>
            </div>
            <div class="anMode anMode2">
                <span class="animg"><img src="__IMG__/anicon3.png" alt=""/></span>
                <span class="aninput aninputym"><input type="text" class="necessary identifyTel"   data-name="验证码" placeholder="验证码"/></span>
                <span class="anym telBtn" style="">获取验证码</span>
            </div>
            <div class="anMode anMode2">
                <span class="reg_icon"><i class="iconfont icon-gerenzhongxin"></i></span>
                <span class="reg_sex">性别：
                    <label class="active" for="sex1"><input id="sex1" type="radio" name="sex" value="0"/> 女</label>
                    <label for="sex2"><input id="sex2" type="radio" name="sex" value="1"/> 男</label>
                </span>
            </div>
            <div class="anMode anMode2">
                <span class="reg_icon"><i class="iconfont icon-map"></i></span>
                <span class="reg_sex">地址：
                    <input type="hidden" class="necessary " data-name="省份" name="pro_name" value=""/>
                    <input type="hidden" class="necessary " data-name="城市" name="city_name" value=""/>
                    <input type="hidden" class="necessary " data-name="地区"  name="town_name" value=""/>
                    <select name="pro" id="pro">
                        <option value="0">选择省份</option>
                        <foreach name="pros" item="vo">
                            <option value="{$vo.id}">{$vo.name}</option>
                        </foreach>>

                    </select>
                    <select name="city" id="city">
                        <option value="0">选择城市</option>

                    </select>
                    <select name="town" id="town">
                        <option value="0">选择县乡</option>

                    </select>
                </span>
            </div>
            <div class="anMode anMode2">
                <span class="animg"><img src="__IMG__/site.png" width="12" height="14" alt=""/></span>
                <span class="aninput"><input name="site"  type="text" placeholder="详细地址"/></span>
            </div>
            <div class="upFiles">
                <div class="tit">
                    上传头像
                </div>
                <div class="img">
                    <img id="preview" src="__IMG__/upFiles.png" alt=""/>
                </div>
                <input  class="files necessary" data-name="头像"   id="file_upload"  name="file"  style="display: none;" type="file"/>
            </div>
            <div class="anMode anModebtn"><input class="regBtn" type="button" value="注册"/></div>
        </div>
        </form>
    </div>
</div>

<!--content end-->
<div class="login_bot">
    <!--footer-->
    <tc_include file="Home/Public/footer" />
    <!--footer end-->
</div>
<script src="__JS__/jquery-1.10.1.min.js"></script>
<script src="__JS__/swiper-3.4.2.jquery.min.js"></script>
<script src="__JS__/fsx.js"></script>
<script>
    //窗口改变页面自动刷新 开始
    window.onresize=function(){
        location.reload();
    };
    $(".heighst").css("height",($(window).height()-$(".an-cnnter").outerHeight())/2);
    $(function(){
        $(".an-box").css("opacity",1);
    });

    $(".reg_sex label").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
    });

//省市区选择
chooseSites();
function chooseSites(){
    //    选择完省份之后生成市
    $("#pro").change(function(){
//        先清空城市及县区里面的值
        $("#city").html('<option value="0">选择城市</option>');
        $("#town").html('<option value="0">选择县乡</option>');


        var pid =0;
        $(this).find("option").each(function(){
            if($(this).is(":selected")){
                var val = $(this).val();

//                获取省名称
                var tex = $(this).text();
                $("input[name='pro_name']").val(tex);
                return pid=val;
            }
        });

        $.ajax({
            url:"{:U('Home/Register/citys')}",
            type:"GET",
            data:{
                id:pid
            },
            dataType:"json",
            success:function(data){
//                把接受到后台返回的json(在前台就是字符串)转换成前台数组使用
                var datas = eval(data);
//                console.log(datas);
                var html1 = "";
                $.each(datas,function(i,v){
//                    console.log(v.name+v.id);
                    html1+="<option value="+v.id+">"+v.name+"</option>";
                });
                $("#city").append(html1);
            }


        })

    });

//    选择完城市之后生成县乡
    $("#city").change(function(){
//        先清空城市及县区里面的值
        $("#town").html('<option value="0">选择县乡</option>');

        var pid =0;
        $(this).find("option").each(function(){
            if($(this).is(":selected")){
                var val = $(this).val();

            //                获取市名称
                var tex = $(this).text();
                $("input[name='city_name']").val(tex);
                return pid=val;
            }
        });

        $.ajax({
            url:"{:U('Home/Register/towns')}",
            type:"GET",
            data:{
                id:pid
            },
            dataType:"json",
            success:function(data){
//                把接受到后台返回的json(在前台就是字符串)转换成前台数组使用
                var datas = eval(data);
//                console.log(datas);
                var html1 = "";
                $.each(datas,function(i,v){
//                    console.log(v.name+v.id);
                    html1+="<option value="+v.id+">"+v.name+"</option>";
                });
                $("#town").append(html1);
            }


        })

    })


//    选择完县乡之后
    $("#town").change(function() {
        $(this).find("option").each(function () {
            if ($(this).is(":selected")) {

            //          获取县乡名称
                var tex = $(this).text();
                $("input[name='town_name']").val(tex);

            }
        });
    })
}

//上传图片中的在页面预览功能
upload();
function upload(){
    $("#preview").click(function(){
        $("#file_upload").click();
    });

    $("#file_upload").change(function() {
        var $file = $(this);
        var fileObj = $file[0];
        var windowURL = window.URL || window.webkitURL;
        var dataURL;
        var $img = $("#preview");

        if(fileObj && fileObj.files && fileObj.files[0]){
            dataURL = windowURL.createObjectURL(fileObj.files[0]);
            $img.attr('src',dataURL);
        }else{
            dataURL = $file.val();
            var imgObj = document.getElementById("preview");
// 两个坑:
// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

        }
    });
}

//    手机验证码发送功能
telIdentify();
function telIdentify(){
    $(".telBtn").click(function(){

//【1】
//        正则验证手机号是否正确
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
        var phone = $('input[name="tel"]').val();
        var isTrue = reg.test(phone);

        if(isTrue){
//【2】
//            发送验证码
            $.ajax({
                url:"{:U('Home/Register/yzma')}",
                data:{
                    "tel":phone
                },
                type:"POST",
                dataType:"json",
                success:function(data){
                    var data = eval(data);
                    console.log("发送成功"+data);
                },
                error:function(data){
                    console.log("发送失败!"+data);

                }
            });
//            发送验证码 end



//【3】  发送验证码后改变按钮状态
            $(this).html("60s后可重新获取");
            $(this).addClass("disable");
            var i = 60;

            var timer=setInterval(function(){

                i--;
                if(i>=1){
                    $(".telBtn").html(i+'s后可重新获取');
                }else{
                    $(".telBtn").html("获取验证码");
                    $(".telBtn").removeClass("disable");
                    clearInterval(timer);
                }

            },1000);

        }else{
            alert("手机号码不正确！");
        }


    })
}


//【4】    点击按钮判断是否提交表单
submit_form();
function submit_form(){
    $(".regBtn").click(function(){
        var y = 1;

//        调试使用，不用验证，就可以提交
//        $("form").submit();
//        return false;

        elseVerify();



function telVerify(){
//【5】        验证手机号和验证码是否一致
    var tel = $('input[name="tel"]').val();
    var ma = $(".identifyTel").val();

    $.ajax({
        url:"{:U('Home/Register/yzcookie')}",
        data:{
            "tel":tel,
            "ma":ma
        },
        type:"POST",
        dataType:"json",
        success:function(data){
            if(data == "100101"){
                alert("手机号不是刚刚那个了!");
                y = 2;
            }else if(data == "100102"){
                alert("验证码错误！");
                y = 2;
//                alert(y);
            }else{
//                alert("验证成功");
//    当所有验证成功时，提交表单
                $("form").submit();
            }
        },
        error:function(err){
            alert("验证失败！");
        }
    });
//   验证手机号和验证码是否一致  end
}





//这些验证均在ajax返回值（手机号码）验证正确之后进行或者在其之前验证，总之她们两个是要套用的
function elseVerify(){
//【6】
    if(y==1){

        //        判断所有必需项是否均已填写
        $(".necessary").each(function(){
            if($(this).val()==""){

                var txt = $(this).data("name");
                alert(txt+"是必需信息!!");
                y = 2;
                return false;
            }
        });

    }
//【7】
    if(y==1){
        //        判断账号号 和 密码格式是否正确
        var reg = /^[a-z0-9]{3,9}$/;
        var account = $("input[name='account']").val();
        var pass = $("input[name='pass']").val();
        var isTrue1 = reg.test(account);
        var isTrue2 = reg.test(pass);
        if(!isTrue1){
            alert("账号格式不正确！");
            y = 2;
            return false;
        }else if(!isTrue2){
            alert("密码格式不正确！");
            y = 2;
        }

    }
//【8】
    if(y==1){


//        判断两次密码是否一致
        var pass1 = $(".pass").val();
        var pass2 = $(".repass").val();
        if(pass1 != pass2){
            alert("两次密码不一致！");
            y = 2;
        }

    }

//【9】
    if(y==1){
//        当其他验证通过时,验证手机验证码
        telVerify();


    }
}





    })
}





</script>
</body>
</html>